
<style ng-bind-html="currentItem|animateItem:currentPageIndex:true"></style>

<link ng-href="{{v}}" ng-repeat="v in links" rel="stylesheet">
<div class="container-fluid">
  <div class="container">
    <div class="row">
	    <div class="col-md-12">
        <div class="page-header form-inline">
          <input class="form-control" type="text" ng-model="info.title">
          <a class="btn btn-large btn-primary" ng-click="save()">保存</a>
          <a class="btn btn-large" ng-href="/user/{{email}}">返回</a>          
        </div>
	    </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">选择分页</div>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="page in pages" ng-class="{active:currentPageIndex===$index}" ng-click="setCurrentPage($index)">     
            <label class="label" ng-class="{'label-default':currentPageIndex!==$index}">第{{$index+1}}页</label>
            <a class="badge" ng-click="removePage($index); $event.stopPropagation();">删除</a>
          </li>
        </ul>
        <a class="btn btn-large" ng-click="newPage()">添加页面</a>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">自定义代码</div>
        <textarea ng-model="info.javascript" class="form-control" rows="20"></textarea>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          当前编辑第{{currentPageIndex+1}}页 
          <select ng-options="k for k in resolution.deviceNames" ng-model="info.currentResolution"></select>
          <a class="btn btn-large btn-primary pull-right" ng-href="/project/{{project}}" target="_blank">预览</a>
        </div>
        <div class="phone-box" ng-class="'p'+currentPageIndex" ng-style="resolution.devices[info.currentResolution]">
        
          <div class="phone-screen" ng-style="currentPage.style|stylefilter:'image'">
            <div class="f" ng-repeat="itemId in currentPage.items" ng-class="'t'+itemId">
              <h5-element 
                item="items[itemId]" 
                set-item="setCurrentItem(itemId)"
                item-id="{{itemId}}"
                resolution="resolution.devices[info.currentResolution]" 
                ng-style="items[itemId].style|stylefilter:items[itemId].type"
                ng-class="items[itemId]|animateClassName"
                is-control="false"
                >
              </h5-element>
            </div>
          </div>
          <div class="phone-screen">
            <h5-element ng-repeat="itemId in currentPage.items"
              item="items[itemId]" 
              set-item="setCurrentItem(itemId)"
              item-id="{{itemId}}"
              resolution="resolution.devices[info.currentResolution]" 
              ng-style="items[itemId].style|stylefilter:items[itemId].type|ctrstylefilter"
              is-control="true"
              >
            </h5-element>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">    
      <ng-include src="'/statics/js/edit/views/page-slot.html'"></ng-include>      
    </div>
    <div class="col-md-3" >
      <ng-include src="'/statics/js/edit/views/item-slot.html'"></ng-include>
    </div>
  </div>
</div>